*{
  padding:0;
  margin:0;
}
body{
  font-family:"微软雅黑";
  font-size:16px;
}
.parent{
  display:-webkit-flex;     /*声明弹性盒模型*/
  display:flex;
}
.left,.right{
  width:40px;
  height:40px;
  text-align:center;
  line-height:40px;
}
.left{
  background:#abcdef;
}
.right{
  background:#DD4F43;
}
.center{
  -webkit-flex:1; /*一定要注意加上浏览器前缀,否则就会失效*/
  flex:1;
}
.center input{
  width:100%;
  height:40px;
  outline:none;
}
.banner-adv{
  width:100%;
  height:200px;
  display:-webkit-box;
  display:box;
  background:#0D6CB0;
}
.list{
  width:100%;
  height:90px;
  display:-webkit-flex;
  display:flex;
}
.list div{
  -webkit-flex:1;
  flex:1;
  text-align:center;
  line-height:90px;
}
.list div:nth-of-type(1){
  background:#DE5246;
}
.list div:nth-of-type(2){
  background:#19A25F;
}
.list div:nth-of-type(3){
  background:#FF8080;
}
.list div:nth-of-type(4){
  background:#F4CD0B;
}
.list div:nth-of-type(5){
  background:#9EDA45;
}
.list-Two{
  margin:15px 0 0 0;
}
.list-Two div:nth-of-type(1){
  background:#B847FF;
}
.list-Two div:nth-of-type(2){
  background:#79B900;
}
.list-Two div:nth-of-type(3){
  background:#FF2424;
}
.list-Two div:nth-of-type(4){
  background:#D2E4F0;
}
.list-Two div:nth-of-type(5){
  background:#4CDF2B;
}
.con{
  height:200px;
  display:-webkit-flex;  /*声明弹性盒模型*/
  display:flex;
}
.con div:nth-of-type(1){
  -webkit-flex:8;   /*根据父元素分成8等分,占80%*/
  flex:8;
  background:#80B3FF;
}
.con div:nth-of-type(2){
  -webkit-flex:2;   /*根据父元素分成2等分,占20%*/
  flex:2;
  background:#CD8B37;
}
